<template>
  <div class="app-container">
    <div class="app-content">
      <el-descriptions>
        <el-descriptions-item label="用户名">{{ form.userName }}</el-descriptions-item>
        <el-descriptions-item label="密码">******</el-descriptions-item>
        <el-descriptions-item label="所属组织机构">{{ form.dept && form.dept.deptName }}</el-descriptions-item>
        <el-descriptions-item label="联系方式">{{ form.phonenumber }}</el-descriptions-item>
        <el-descriptions-item label="用户昵称">{{ form.nickName }}</el-descriptions-item>
        <el-descriptions-item label="备注" span="3">{{ form.remark }}</el-descriptions-item>
        <el-descriptions-item label="图片" span="3">
          <template>
            <img :src="item" alt="" class="son-img" v-for="(item, index) in form.imgList" :key="index" />
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="附件" span="3">
          <div class="files">
            <div class="file-content"
              v-for="(item, index) in form.fileList"
              :key="index"
              @click="getShowFile(item)"
            >
              <img src="@/assets/images/pdf.png" alt="" />
              <div class="file-name">
                <p>{{ getFileName(item)}}</p>
                <span>219.8KB</span>
              </div>
            </div>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <DrawerFile v-if="drawer" :drawer.sync="drawer" :fileName="fileName" :src="fileUrl" />
  </div>
</template>

<script>
import { getUser } from "@/api/system/user";
import DrawerFile from '@/components/DrawerFile'
export default {
  name: 'UserQuery',
  components: { DrawerFile },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      form: {},
      drawer: false,
      fileName: '',
      fileUrl: ''
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    async getInfo() {
      const res = await getUser(this.$route.params.userId)
      if (res.data.img) {
        res.data.imgList = []
        let imgArr = res.data.img.split(',')
        res.data.imgList = imgArr.map(item => {
          return this.baseUrl + item
        })
      }
      if (res.data.file) {
        res.data.fileList = []
        let fileArr = res.data.file.split(',')
        res.data.fileList = fileArr.map(item => {
          return this.baseUrl + item
        })
      }
      this.form = res.data
    },
    /** 展示附件 */
    getShowFile(row) {
      this.drawer = true
      this.fileName = this.getFileName(row)
      this.fileUrl = row
    }
  }
}
</script>

<style lang="scss" scoped>
  .app-content {
    background: #fff;
    width: 100%;
    height: 100%;
    padding: 30px;
    overflow-y: scroll;
    .son-img {
      width: 102px;
      height: 102px;
      margin-right: 20px;
    }
    .files {
      // display: flex;
      // flex-wrap: wrap;
      .file-content {
        width: 422px;
        height: 72px;
        background: #F8F8F8;
        display: flex;
        align-items: center;
        padding: 0 30px;
        margin: 0 20px 20px 0;
        cursor: pointer;
        img {
          width: 34px;
          height: 39px;
        }
        .file-name {
          margin: 0 20px;
          p {
            margin: 0;
          }
          span {
            font-size: 14px;
            color: #999999;
            line-height: 19px;
            text-align: left;
            font-style: normal;
          }
        }
      }
    }
    .son-content {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 30px;
      
    }
  }
</style>